<template>
  <div class="w-table-filter">
    <div class="w-table-filter-l">
      <el-form
        ref="form"
        class="w-table-filter-form"
        :inline="true"
        label-position="right"
        label-width="70px"
        :show-message="false"
      >
        <el-form-item label="所属学院">
          <el-select
            v-model="filterData.collegeId"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
            @change="filterData.professionId = null"
          >
            <el-option
              v-for="item in collegeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="所属系">
          <el-select
            v-model="filterData.professionId"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in professionOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="培养层次">
          <el-select
            v-model="filterData.dictCultivationLevel"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="dict in cultivation_level"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="班级年份">
          <el-date-picker
            v-model="filterData.grade"
            class="w-table-filter-input"
            clearable
            placeholder="请选择"
            type="year"
            value-format="YYYY"
          />
        </el-form-item>

        <el-form-item label="班级名称">
          <el-input
            v-model.trim="filterData.className"
            class="w-table-filter-input"
            clearable
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="班级代码">
          <el-input
            v-model.trim="filterData.classCode"
            class="w-table-filter-input"
            clearable
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item>
          <el-button icon="search" type="success" @click="save">
            搜索
          </el-button>

          <el-button icon="refresh" type="info" @click="clear">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="w-table-filter-r">
      <slot />
    </div>
  </div>
</template>

<script setup>
  const emits = defineEmits(['save'])
  const { proxy } = getCurrentInstance()

  // 获取静态字典
  const { cultivation_level } = proxy.useDict('cultivation_level')

  // data
  const def = {
    name: '',
  }
  const filterData = ref(JSON.parse(JSON.stringify(def)))

  // 方法
  function clear() {
    for (let f1 in filterData.value) {
      filterData.value[f1] = def[f1] || ''
    }
    save()
  }

  function save() {
    const d = { ...filterData.value }
    emits('save', d)
  }
</script>

<style lang="scss" scoped></style>
